<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>离线安全报表系统</title>
    <!-- 离线环境适配 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <style>
        /* 基础样式 */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
        }

        .tabs {
            margin-bottom: 20px;
        }

        .tab-btn {
            padding: 8px 16px;
            margin-right: 5px;
            border: 1px solid #ddd;
            background: #f8f8f8;
            cursor: pointer;
            border-radius: 4px 4px 0 0;
        }

        .tab-btn.active {
            background: #007bff;
            color: white;
            border-bottom: 1px solid transparent;
        }

        .chart-container {
            min-height: 400px;
            border: 1px solid #eee;
            padding: 15px;
            border-radius: 4px;
            background: white;
        }

        .data-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
        }

        .data-table th,
        .data-table td {
            padding: 8px;
            border: 1px solid #ddd;
            text-align: left;
        }
    </style>
</head>

<body>
    <!-- 标签页导航 -->
    <div class="tabs">
        <button class="tab-btn active" onclick="switchTab(0)">攻击类型统计</button>
        <button class="tab-btn" onclick="switchTab(1)">趋势分析</button>
        <button class="tab-btn" onclick="switchTab(2)">详细日志</button>
    </div>

    <!-- 图表容器 -->
    <div id="chartContainer" class="chart-container"></div>

    <!-- 数据表格 -->
    <table id="dataTable" class="data-table" style="display:none;">
        <thead>
            <tr>
                <th>攻击类型</th>
                <th>次数</th>
                <th>中文名称</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <!-- 离线资源声明 -->
    <script src="https://cdn.jsdelivr.net/npm/mockjs@1.1.0/dist/mock-min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>

    <script>
        // Mock.js 模拟接口配置
        Mock.mock(/\/api\/SafeReportV2\/getAttackTypeTop/, 'get', {
            "flag": 1,
            "msg": {
                "attackTypeTop": {
                    "total": "@integer(100000, 500000)",
                    "list|10": [{
                        "subtype": "@cword(4, 10)",
                        "t": "@integer(1000, 100000)",
                        "type_name": "@ctitle"
                    }]
                }
            }
        });

        // 初始化图表
        let myChart = echarts.init(document.getElementById('chartContainer'));
        let currentTab = 0;

        // 切换标签页
        function switchTab(index) {
            document.querySelectorAll('.tab-btn').forEach((btn, i) => {
                btn.classList.toggle('active', i === index);
            });
            document.getElementById('dataTable').style.display = index === 2 ? 'table' : 'none';
            if (index === 0) loadChartData();
        }

        // 加载图表数据
        function loadChartData() {
            fetch('/api/SafeReportV2/getAttackTypeTop?zone=&host=&from=1743523200&to=1746547199')
                .then(res => res.json())
                .then(renderChart)
                .catch(handleError);
        }

        // 渲染图表
        function renderChart(data) {
            if (!data?.flag === 1) return handleError();

            const option = {
                title: { text: '攻击类型分布', left: 'center' },
                tooltip: { trigger: 'item' },
                series: [{
                    type: 'pie',
                    radius: '50%',
                    data: data.msg.attackTypeTop.list.map(item => ({
                        value: item.t,
                        name: item.type_name
                    })),
                    emphasis: {
                        itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }
                    }
                }]
            };
            myChart.setOption(option);
            renderTable(data);
        }

        // 渲染表格
        function renderTable(data) {
            const tbody = document.querySelector('#dataTable tbody');
            tbody.innerHTML = data.msg.attackTypeTop.list
                .map(item => `
                    <tr>
                        <td>${item.subtype}</td>
                        <td>${item.t}</td>
                        <td>${item.type_name}</td>
                    </tr>
                `)
                .join('');
        }

        // 错误处理
        function handleError(err) {
            console.error('数据加载失败:', err);
            myChart.setOption({
                title: { text: '数据加载失败', textStyle: { color: '#ff4444' } },
                series: []
            });
        }

        // 初始化加载
        loadChartData();

        // 离线缓存处理
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('/sw.js')
                    .then(registration => console.log('SW注册成功:', registration))
                    .catch(err => console.log('SW注册失败:', err));
            });
        }
    </script>
</body>

</html>